<template>
	<!-- 差旅编辑报销明细 -->
	<view>
		<view style="height: 100%;padding-top: 20rpx;padding-bottom: 120rpx;">
			<uni-forms ref="form" :modelValue="entity" label-width="110px">
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="票据日期:" :rules="$rules.handle.BillDate" required name="BillDate">
						<view @click="DateChange($event, 'BillDate')">
							<uni-easyinput v-model="entity.BillDate" :disabled="true" :inputBorder="false" />
						</view>
					</uni-forms-item>
					<!-- 、CustomId -->
					<uni-forms-item label="客户:" name="CustomerName">
						<!-- 关联的沟通记录列表 -->
						<view v-if="entity.CustomerNameOptions">
							<view v-if="entity.CustomerNameOptions.length == 0" @click="CustomerChoice">
								<uni-easyinput v-model="entity.CustomerName" suffixIcon="compose" :inputBorder="false"
									:disabled="true" />
							</view>
							<view v-else>
								<block v-for="(item, index) in entity.CustomerNameOptions" :key="index">
									<view
										style="display: flex;flex-wrap: wrap;padding-left: 20rpx;padding-right: 20rpx;">
										<u-tag @close="tagCloseChange(index)"
											style="margin-right: 20rpx;margin-bottom: 15rpx;"
											:text="item.cCusName ? item.cCusName :item.text" type="primary"
											:closeable="disabled==true?false : true" />
									</view>

								</block>
							</view>
						</view>

					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="业务性质:" :rules="$rules.handle.ExpenseTypeName" required
						name="ExpenseTypeName">
						<!-- 暂时不删除
						<!-- <uni-data-select :clear="false" style="background-color: #fff;border-radius: 10rpx;"
							v-model="entity.ExpenseType" :localdata="newExpenseTypeOptions"
							@change="selectOptionsChange($event, 'ExpenseType')" :disabled="disabled"></uni-data-select> -->
						<uni-data-picker popup-title="请选择业务性质" :localdata="ExpenseTypeTree" :readonly="disabled"
							@change="pickerChange($event, 'ExpenseTypeName')" v-model="entity.ExpenseTypeName">
						</uni-data-picker>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="票据类型:" :rules="$rules.handle.BillType" required name="BillType">
						<uni-data-select :clear="false" style="background-color: #fff;border-radius: 10rpx;"
							v-model="entity.BillType" :localdata="newBillTypeOptions"
							@change="selectOptionsChange($event, 'BillType')" :disabled="disabled"></uni-data-select>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="发票分类:" :rules="$rules.handle.InvoiceClassification" required
						name="InvoiceClassification">
						<uni-data-select :clear="false" style="background-color: #fff;border-radius: 10rpx;"
							v-model="entity.InvoiceClassification" :localdata="newInvoiceClassificationOptions"
							@change="selectOptionsChange($event, 'InvoiceClassification')"
							:disabled="disabled"></uni-data-select>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="票面金额:" :rules="$rules.handle.FaceAmount" required name="FaceAmount">
						<view>
							<uni-easyinput v-model="entity.FaceAmount" :inputBorder="false" type="number"
								@input="inputChange($event, 'FaceAmount')" :adjust-position="false"
								:disabled="disabled" />
						</view>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="报销金额:" :rules="$rules.handle.ReimburseAmount" required
						name="ReimburseAmount">
						<view>
							<uni-easyinput v-model="entity.ReimburseAmount" type="number"
								@input="inputChange($event, 'ReimburseAmount')" :adjust-position="false"
								:inputBorder="false" :disabled="disabled" />
						</view>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="票据张数:" name="BillsNum">
						<view>
							<uni-easyinput v-model="entity.BillsNum" :inputBorder="false" :disabled="disabled" />
						</view>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="是否无票支出:" name="IsNoTicket">
						<radio-group @change="switchChange">
							<view style="display: flex;">
								<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in IsNoTicketOptions"
									:key="item.value">
									<view class="flex Acenter" style="margin-right: 50rpx;;margin-top: 10rpx;">
										<radio :value="item.value" :checked="item.checked" :disabled="disabled"
											style="transform: scale(0.8);" />
										<view>{{item.name}}</view>
									</view>

								</label>
							</view>
						</radio-group>
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="摘要:" name="ItemAbstract">
						<uni-easyinput v-model="entity.ItemAbstract" placeholder="请输入摘要" type="textarea"
							:disabled="disabled" :adjust-position="false" :inputBorder="false" />
					</uni-forms-item>
				</view>
				<view style="background-color: #fff;padding:0 20rpx;">
					<uni-forms-item label="附件:" name="reimburse_Files">
					</uni-forms-item>
				</view>
				<UploadCopy ref="UploadCopy" @handlerSuccess="handlerSuccess" :disabled="disabled">
				</UploadCopy>
			</uni-forms>
		</view>
		<view v-if="!disabled" class="submitButton">
			<u-button type="primary" @click="handleSubmitDetailSave" :loading="loading">保存</u-button>
		</view>

		<!-- 引用客户组件 -->
		<Myuser @customerChoice="Client" ref="myuser" />

		<!-- 选择日期 -->
		<u-calendar v-model="isCalendar" :mode="mode" @change="calendarChange"></u-calendar>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	//客户
	import Myuser from "../../components/Myuser.vue";
	import UploadCopy from "../../components/uploadCopy.vue"
	// 引入公共头部组件
	import {
		Base_DistrictGetTreeDataList,
		//日常喝差旅附件删除
		Reimburse_FilesDeleteData
	} from "@/api/interface.js";
	export default {
		components: {
			// 客户组件
			Myuser,
			// 上传组件
			UploadCopy
		},
		data() {
			return {
				// 是否无票状态
				IsBill: 0, //默认否
				loading: false,
				// 是否无票支出下拉列表数据
				IsNoTicketOptions: [{
						value: '1',
						name: '是',
						checked: false
					},
					{
						value: '0',
						name: '否',
						checked: true
					}
				],
				// /上传文件列表
				reimburse_Files: [],
				disabled: false,
				// 是否展示弹窗
				show: false,
				// 是否显示日期弹窗
				isCalendar: false,
				// 日期选择
				mode: 'date',
				entity: {
					BillsNum: ""
				},
				// 当前行程明细主表下的费用明细子表对象
				newEntity: {},
				// 点击的是出发日期还是到达日期
				DateType: "",
				// 城市地区树结构
				// 地区树结构
				dataTree: [],
				// 业务性质树结构数据
				ExpenseTypeTree: [],
				// 票据类型下拉列表数据
				newBillTypeOptions: [],
				// 费用类型下拉列表数据
				newExpenseTypeOptions: [],
				// 发票分类下拉列表数据
				newInvoiceClassificationOptions: [],
				// 所有公司下拉列表数据
				newCompayListOptions: [],
				options: {},
				// 上一页面
				prevPage: null,
				// 传递过来的json  data
				optionsData: {}

			}
		},
		computed: {
			...mapState(["BillTypeOptions", "ExpenseTypeOptions", "InvoiceClassificationOptions", "CompayListOptions",
				"CustomerInfoOptions", "Base_DistrictGetTreeDataOptions"
			]),
		},
		onShow() {
			// 业务性质树结构数据回显
			this.ExpenseTypeTree = this.ExpenseTypeOptions
			if (this.entity.reimburse_Files) {
				// 处理当前传递过来的子表行明细附件回显
				this.$nextTick(function() {
					this.$refs.UploadCopy.setFileShowList(this.entity.reimburse_Files)
				})
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中'
			})
			setTimeout(function() {
				uni.hideLoading()
			}, 500)


			// this.$nextTick(function() {
			// 	this.$refs.UploadCopy.show = false
			// 	this.$refs.UploadCopy.deletable = true
			// })
			// 相关下拉数据赋值回显
			this.newBillTypeOptions = this.BillTypeOptions
			this.newExpenseTypeOptions = this.ExpenseTypeOptions
			this.newInvoiceClassificationOptions = this.InvoiceClassificationOptions
			this.newCompayListOptions = this.CompayListOptions
			// 城市的确树结构
			this.dataTree = this.Base_DistrictGetTreeDataOptions

			if (uni.getStorageSync('entity')) {
				let data = uni.getStorageSync('entity')
				this.options = data
				// 判断是否是详情过来
				if (data.disabled) {
					this.disabled = data.disabled
					uni.setNavigationBarTitle({
						title: '行程费用详情'
					})
				}
				this.optionsData = data
				this.entity = data.item
				this.newEntity = data.entity
			}


			// 处理默否无票支出回显
			this.IsNoTicketOptions[0].checked = false
			this.IsNoTicketOptions[1].checked = false
			if (this.entity.IsBill == true) {
				this.IsBill = 1
				this.IsNoTicketOptions[0].checked = true
				this.IsNoTicketOptions[1].checked = false
			} else {
				this.IsBill = 0
				this.IsNoTicketOptions[0].checked = false
				this.IsNoTicketOptions[1].checked = true
			}
			console.log('差旅x修改编辑详情过来---------------------------', this.entity, this.options, this.optionsData)
			return

			// this.entity.ExpenseType = this.entity.ExpenseTypeName
			// 该代码为了适配pc端创建的数据  回显手机端  的业务性质的名称赋值为对应id的情况
			// if (this.ExpenseTypeOptions.length > 0) {
			// 	if (this.entity.ExpenseType === this.entity.ExpenseTypeName) {
			// 		// 业务性质 发票分类  费用类型下拉改变事件
			// 		this.selectOptionsChange(this.entity.ExpenseType, 'ExpenseType')
			// 	}
			// }

			// 单独处理是否无票支出回显
			// if (this.entity.IsNoTicket) {
			// 	if (this.entity.IsNoTicket == 1) {
			// 		this.IsNoTicketOptions[0].checked = true
			// 		this.IsNoTicketOptions[1].checked = false
			// 	} else {
			// 		this.IsNoTicketOptions[0].checked = false
			// 		this.IsNoTicketOptions[1].checked = true
			// 	}
			// }

			// 处理子表编辑情况下业务性质回显  暂时删除
			// this.getExpenseTypeName(this.entity)

			// if (this.entity.Id) {
			// 	// 单独处理出发城市和到达城市回显
			// 	let DepartureCityNameArr = [{
			// 		text: this.entity.DepartureCityName.split('/')[0],
			// 		value: this.entity.DepartureCity.split('/')[0]
			// 	}, {
			// 		text: this.entity.DepartureCityName.split('/')[1],
			// 		value: this.entity.DepartureCity.split('/')[1]
			// 	}]
			// 	let ArrivalCityIdNameArr = [{
			// 		text: this.entity.ArrivalCityIdName.split('/')[0],
			// 		value: this.entity.ArrivalCityId.split('/')[0]
			// 	}, {
			// 		text: this.entity.ArrivalCityIdName.split('/')[1],
			// 		value: this.entity.ArrivalCityId.split('/')[1]
			// 	}]
			// 	let ExpenseTypeNameArr = [{
			// 		text: this.entity.ExpenseTypeName.split('/')[0],
			// 		value: this.entity.ExpenseType.split('/')[0]
			// 	}, {
			// 		text: this.entity.ExpenseTypeName.split('/')[1],
			// 		value: this.entity.ExpenseType.split('/')[1]
			// 	}]


			// 	// let ExpenseTypeNameArr = []

			// 	console.log('开始灰心啊了', DepartureCityNameArr, ArrivalCityIdNameArr, this.entity)
			// 	this.$set(this.entity, 'ArrivalCityId', ArrivalCityIdNameArr[0].value + '/' + ArrivalCityIdNameArr[1]
			// 		.value)
			// 	this.$set(this.entity, 'ArrivalCityIdName', ArrivalCityIdNameArr)
			// 	this.$set(this.entity, 'DepartureCity', DepartureCityNameArr[0].value + '/' + DepartureCityNameArr[1]
			// 		.value)
			// 	this.$set(this.entity, 'DepartureCityName', DepartureCityNameArr)
			// 	this.$set(this.entity, 'ExpenseType', ExpenseTypeNameArr[0].value + '/' + ExpenseTypeNameArr[1].value)
			// 	this.$set(this.entity, 'ExpenseTypeName', ExpenseTypeNameArr)
			// }


			// console.log('获取data----', this.entity)
			// this.$forceUpdate()
		},
		methods: {
			// 上传成功
			handlerSuccess(file, fileEntity, index) {
				var that = this
				console.log('差旅新增新增上传成功了----------------------获取过来的', file, fileEntity, index)
				if (file.reimburse_Files.length > 0) {
					let reimburse_Files = file.reimburse_Files
					this.reimburse_Files = reimburse_Files
					this.entity.reimburse_Files = reimburse_Files
					this.entity.Upload = file.Upload
				}
				// 以下代码暂时不要删除 
				// var that = this
				// let arr = []
				// let Upload = []
				// let reimburse_Files = []

				// console.log('编辑过来的上传附件---', file, fileEntity, index)
				// if (file.length > 0) {
				// 	let newFile = file

				// 	newFile.forEach(item => {

				// 		let obj = {
				// 			fileEntity: item.data.fileEntity ? item.data.fileEntity : item.data
				// 		}
				// 		arr.push(obj)
				// 	})
				// 	let reimburse_Files = arr
				// 	reimburse_Files.forEach(item => {
				// 		// 判断是否有id的附件  是除详情外上传返回的数据 进行附件路径处理提交
				// 		if (item.fileEntity) {
				// 			if (item.fileEntity.id) {
				// 				item.fileEntity.FileName = item.fileEntity.fileGuid + item.fileEntity.extension
				// 				item.fileEntity.FilePath = item.fileEntity.linkUrl
				// 				if (!item.invoiceId) {
				// 					delete item.invoiceId
				// 				}
				// 				Upload.push(item)
				// 			}
				// 		}

				// 	})

				// 	this.reimburse_Files = reimburse_Files
				// 	this.entity.reimburse_Files = reimburse_Files
				// 	this.entity.Upload = Upload

				// }
			},
			// 移除附件
			handlerRmoveFile(file) {
				var that = this
				console.log('差旅编辑明细删除附件父组件', file, this.entity)
			},
			// 处理业务性质回显函数
			generateCArray(a, b) {
				return a.map((item, index) => ({
					text: item,
					value: b[index]
				}));
			},
			// 处理业务性质回显
			// getExpenseTypeName(entity) {
			// 	console.log('业务性质huixian------------', entity)

			// 	return

			// 	let ExpenseTypeNameArr = entity.ExpenseTypeName.split('/')
			// 	let ExpenseTypeArr = entity.ExpenseType.split('/')
			// 	let newExpenseTypeName = this.generateCArray(ExpenseTypeNameArr, ExpenseTypeArr)


			// 	return
			// 	// 回显业务性质
			// 	this.$set(this.entity, 'ExpenseTypeName', newExpenseTypeName)


			// },
			// 已关联的客户列表标签列表删除
			tagCloseChange(index) {
				let newCustomerNameArr = this.entity.CustomerName.split(',')
				let newCustomIdArr = this.entity.CustomId.split(',')
				newCustomerNameArr.splice(index, 1)
				newCustomIdArr.splice(index, 1)
				this.$set(this.entity, 'CustomerName', newCustomerNameArr.join(','))
				this.$set(this.entity, 'CustomName', this.entity.CustomerName)
				this.$set(this.entity, 'CustomId', newCustomIdArr.join(','))
				this.entity.CustomerNameOptions.splice(index, 1)
				console.log('删除了', index, this.entity, )
				this.$forceUpdate()
			},
			// 出发城市和到达城市
			pickerChange(event, key) {
				if (this.disabled == true) {
					return
				}

				let arr = event.detail.value
				// 走业务性质逻辑
				// 业务性质名称
				let ExpenseTypeName = event.detail.value.map(item => {
					return item.text
				}).join('/')
				let ExpenseTypeId = event.detail.value.map(item => {
					return item.value
				}).join('/')
				// 处理id
				this.$set(this.entity, 'newExpenseType', ExpenseTypeId)
				this.$set(this.entity, 'ExpenseTypeId', ExpenseTypeId)
				// 处理名字
				this.$set(this.entity, 'newExpenseTypeName', ExpenseTypeName)
				this.$set(this.entity, 'ExpenseType', ExpenseTypeName)
				// 下拉列表数据
				this.$set(this.entity, 'ExpenseTypeName', arr)

				console.log('业务性质选择了修改', event, key, this.entity)

			},
			// 业务性质 发票分类  费用类型下拉改变事件
			selectOptionsChange(event, key) {

				let optionsArr = []

				if (key === 'ExpenseType') {
					optionsArr = this.ExpenseTypeOptions
				} else if (key === 'BillType') {
					// 票据分类
					optionsArr = this.BillTypeOptions
				} else {
					// 发票分类
					optionsArr = this.InvoiceClassificationOptions
				}
				// 业务性质
				let ExpenseTypeName = optionsArr.filter(item => item.value === event)[0].text
				this.$set(this.entity, key + 'Name', ExpenseTypeName)
			},
			// 是否无票支出改变
			switchChange(event) {
				let IsBill = event.detail.value
				this.IsBill = IsBill
			},
			// 票面金额  报销金额实时输入事件
			inputChange(event, key) {
				const inputRule = /[^1-9]/g //只能输入正整数
				if (event < 0) {
					this.$nextTick(() => {
						this.$set(this.entity, key, inputRule);
					});
				}
				if (key === 'FaceAmount') {
					// 票面金额实时输入的时候 同时更新报销金额联动
					this.entity.ReimburseAmount = event
				}
			},
			//本条客户的数据
			Client(arr) {

				// 全部删除客户标签后 如果再次冲i性能选择进来直接赋值CustomerNameOptions
				this.entity.CustomerNameOptions = arr
				// 重新赋值客户名称和id数组
				let CustomerNameArr = arr.map(item => {
					return item.cCusName
				})
				let CustomIdArr = arr.map(item => {
					return item.Id
				})
				this.$set(this.entity, "CustomerName", CustomerNameArr.join(','));
				this.$set(this.entity, "CustomName", CustomerNameArr.join(','));
				this.$set(this.entity, "CustomId", CustomIdArr.join(','));
				console.log('选择好客户了', arr, this.entity)
			},
			//选择客户
			CustomerChoice() {
				if (this.disabled) return
				this.$refs.myuser.openForm();
			},
			// 选择地址
			changeAddress(event) {},
			// 出发日期和到达日期选择
			DateChange(event, key) {
				if (this.disabled) return
				this.DateType = key
				this.isCalendar = true
			},
			// 选择日期确定
			calendarChange(event) {

				// *************注意  存储必须用set赋值  否则校验不通过   ************************************
				this.$set(this.entity, this.DateType, event.result);
				// *************注意  存储必须用set赋值  否则校验不通过   ************************************
				// this.entity.DailyRecordDate = event.result
			},
			// 添加明细保存
			handleSubmitDetailSave() {
				var that = this
				console.log('开始提交了', this.entity)
				this.$refs.form.validate().then(res => {
					let newEntity = JSON.parse(JSON.stringify(this.entity))
					// 是否无票支出格式化赋值
					this.$set(newEntity, 'IsBill', this.IsBill == 1 ? true : false)
					console.log(
						'行程明细提交newEntitynewEntitynewEntitynewEntitynewEntitynewEntitynewEntitynewEntitynewEntitynewEntity---',
						newEntity)
					let pages = getCurrentPages() // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
					let prevPage = pages[pages.length - 2] //上一页页面实例
					uni.navigateBack({
						delta: 1,
						success: () => {
							prevPage.$vm.setDetailData('edit', newEntity) // 给上一页绑定方法otherFun,传参地址id
						}
					})

				}).catch(err => {
					uni.hideLoading()
					that.loading = false
				})
			},
			init() {
				this.show = true

			},
			openForm(data) {
				this.init()
			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="less" scoped>
	/* 设置 label 的样式 */
	::v-deep.uni-forms-item {
		padding-right: 40rpx !important;

		/* 例如，设置 label 的宽度和对齐方式 */
		.uni-forms-item__label {
			display: flex !important;
			justify-content: flex-end !important;
		}
	}

	// 覆盖uniapp 的 uni-data-select 央视
	::v-deep.uni-select {
		border: none !important;
	}

	// 覆盖uni-data-pirker 样式
	::v-deep.input-value-border {
		border: none !important;
	}

	// 覆盖uviewform表单form-item的下边距
	::v-deep.uni-forms-item {
		margin-bottom: 0 !important;
		border-bottom: 1px solid #EEE;
		padding-top: 20rpx !important;
		padding-bottom: 20rpx !important;
	}

	.submitButton {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100rpx;
		/*暂时发现安卓小屏手机安全区为0 && 不带单位的话padding-bottom会失效，写一个兜底, 并写在最上面；f12发现css样式如果都给height设置样式，会依次往下，用最底下的一个样式，如果最下面的没失效，依次往上查找，所以兜底的写在最上面 */
		height: calc(130rpx + constant(safe-area-inset-bottom));
		/* 直接扩展高度，因为padding-bottom是内边距 */
		height: calc(130rpx + env(safe-area-inset-bottom));
		/* 直接扩展高度 */
		background: #fff;
		padding-top: 10rpx;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 iOS<11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容iOS>= 11.2*/
		border-top: 1px solid #e9e9e9;
		padding-left: 15px;
		padding-right: 15px;
	}
</style>